<template>
  <div class="c-container">
    <h1>{{ label }}</h1>
    <Event1 @custom-event="eventHandler1" />
    <Event2 @custom-event="eventHandler2" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Event1 from "./Event1.vue";
import Event2 from "./Event2.vue";

const label = ref("custom event");
const eventHandler1 = (data: String) => {
  console.log("eventHandler1, data", data);
};
const eventHandler2 = (data: String) => {
  console.log("eventHandler2, data", data);
};
</script>

<style scoped>
.c-container {
  background-color: yellowgreen;
  height: 80vh;
}
</style>
